<template>
	<!-- Java知识点学习卡片容器 -->
	<view class="java-learn-container" :style="{ background: bgGradient }">
		<!-- 顶部导航栏和标题 -->
		<view class="page-header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-row">
				<view class="back-button" @click="handleGoBack">
					<text class="back-icon">←</text>
				</view>
				<view class="header-content">
					<text class="header-title">{{ techId === 'java' ? '☕ Java核心知识点' : '💾 SQL核心知识点' }}</text>
					<text class="header-subtitle">{{ techId === 'java' ? '每张卡片聚焦一个Java核心概念' : '每张卡片聚焦一个SQL核心概念' }}</text>
				</view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="content-wrapper">
			<!-- 分类选择器 -->
			<view class="category-selector-wrapper">
				<view class="category-selector-header">
					<text class="category-title">📚 知识分类</text>
					<text class="card-count">{{ currentCategoryCards.length }} 个知识点</text>
				</view>
				<scroll-view class="category-selector" scroll-x show-scrollbar="false" :scroll-into-view="scrollIntoView">
					<view 
						v-for="(category, index) in categories" 
						:key="category.id"
						:id="'category-' + index"
						class="category-item" 
						:class="{ active: currentSwiperIndex === index }" 
						@click="handleCategoryClick(index)">
						<text class="category-icon">{{ category.icon }}</text>
						<text class="category-text">{{ category.name }}</text>
					</view>
				</scroll-view>
			</view>

			<!-- 内容Swiper区域 -->
			<swiper 
				class="content-swiper" 
				:current="currentSwiperIndex"
				@change="handleSwiperChange"
				:duration="300">
				<swiper-item v-for="(category, catIndex) in categories" :key="category.id" class="swiper-page">
					<!-- 知识卡片网格列表 -->
					<scroll-view class="card-container" scroll-y show-scrollbar="false">
						<!-- 空状态提示 -->
						<view v-if="getCategoryCards(category.id).length === 0" class="empty-state">
							<text class="empty-icon">📖</text>
							<text class="empty-title">暂无知识点</text>
							<text class="empty-desc">敬请期待更多Java知识点卡片</text>
						</view>

						<!-- 网格卡片列表 -->
						<view v-else class="cards-grid">
							<view 
								v-for="(card, index) in getCategoryCards(category.id)" 
								:key="card.id" 
								class="grid-card"
								hover-class="grid-card-hover"
								@click="handleLearnMore(card)">
								<!-- 卡片装饰条 -->
								<view class="grid-card-decoration" :style="{ background: card.color }"></view>
								
								<!-- 卡片编号 -->
								<view class="grid-card-number">
									<text class="number-text">{{ index + 1 }}</text>
								</view>
								
								<!-- 卡片内容 -->
								<view class="grid-card-content">
									<!-- 标题 -->
									<text class="grid-card-title">{{ card.title }}</text>
									
									<!-- 描述摘要 -->
									<text class="grid-card-desc">{{ card.description }}</text>
									
									<!-- 底部信息 -->
									<view class="grid-card-footer">
										<view class="grid-card-badge" :style="{ background: card.difficultyBg }">
											<text class="badge-text">{{ card.difficulty }}</text>
										</view>
										<view class="grid-card-points">
											<text class="points-icon">💡</text>
											<text class="points-text">{{ card.keyPoints.length }}个要点</text>
										</view>
									</view>
								</view>
								
								<!-- 学习状态标识 -->
								<view class="learn-status" :class="{ learned: card.learned }">
									<text class="status-icon">{{ card.learned ? '✓' : '○' }}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import { categories as allCategoriesData } from '@/data/knowledge';
	import { allKnowledgeCards } from '@/data/knowledge';
	import type { KnowledgeDetail, Category } from '@/types/knowledge';

	/**
	 * 获取URL参数中的技术栈ID
	 */
	const getTechIdFromUrl = (): string => {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		return (currentPage.options?.techId as string) || 'java';
	};

	/**
	 * 获取URL参数中的背景渐变色
	 */
	const getBgGradientFromUrl = (): string => {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const bgGradient = (currentPage.options?.bgGradient as string) || '';
		return bgGradient ? decodeURIComponent(bgGradient) : 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)';
	};

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		// 基础间距 20px（约等于 40rpx），加上安全区域
		return safeAreaTop + 20;
	});

	/**
	 * 当前技术栈ID
	 */
	const techId = ref<string>(getTechIdFromUrl());

	/**
	 * 背景渐变色
	 */
	const bgGradient = ref<string>(getBgGradientFromUrl());

	/**
	 * 根据技术栈ID筛选分类
	 */
	const getCategoriesByTechId = (techId: string): Category[] => {
		if (techId === 'java') {
			return allCategoriesData.filter(cat => !cat.id.startsWith('sql-'));
		} else if (techId === 'sql') {
			return allCategoriesData.filter(cat => cat.id.startsWith('sql-'));
		}
		return [];
	};

	/**
	 * 知识分类数据
	 */
	const categories = ref<Category[]>(getCategoriesByTechId(techId.value));

	/**
	 * 根据技术栈ID筛选知识卡片
	 */
	const getKnowledgeCardsByTechId = (techId: string): KnowledgeDetail[] => {
		if (techId === 'java') {
			return allKnowledgeCards.filter(card => !card.categoryId.startsWith('sql-'));
		} else if (techId === 'sql') {
			return allKnowledgeCards.filter(card => card.categoryId.startsWith('sql-'));
		}
		return [];
	};

	/**
	 * 知识点卡片数据 - 根据技术栈筛选
	 */
	const knowledgeCards = ref<KnowledgeDetail[]>(getKnowledgeCardsByTechId(techId.value));

	/**
	 * 当前Swiper索引
	 */
	const currentSwiperIndex = ref(0);

	/**
	 * 分类滚动定位ID
	 */
	const scrollIntoView = ref('');

	/**
	 * 获取当前分类的卡片
	 */
	const currentCategoryCards = computed(() => {
		const currentCategory = categories.value[currentSwiperIndex.value];
		return currentCategory ? getCategoryCards(currentCategory.id) : [];
	});

	/**
	 * 根据分类ID获取卡片列表
	 */
	const getCategoryCards = (categoryId: string) => {
		return knowledgeCards.value.filter(card => card.categoryId === categoryId);
	};

	/**
	 * 处理Swiper滑动切换
	 */
	const handleSwiperChange = (e: any) => {
		const newIndex = e.detail.current;
		currentSwiperIndex.value = newIndex;
		// 自动滚动分类选择器到可视区域
		scrollIntoView.value = 'category-' + newIndex;
	};

	/**
	 * 处理分类点击
	 */
	const handleCategoryClick = (index: number) => {
		currentSwiperIndex.value = index;
	};

	/**
	 * 处理学习详情点击
	 */
	const handleLearnMore = (card: KnowledgeDetail) => {
		uni.navigateTo({
			url: `/pages/technology/knowledge/detail?id=${card.id}&techId=${techId.value}`
		});
	};

	/**
	 * 返回上一页
	 */
	const handleGoBack = () => {
		uni.navigateBack();
	};

	/**
	 * 页面加载时重新初始化
	 */
	onMounted(() => {
		// 重新获取技术栈ID和背景色（防止URL参数变化）
		const currentTechId = getTechIdFromUrl();
		const currentBgGradient = getBgGradientFromUrl();
		
		if (currentTechId !== techId.value) {
			techId.value = currentTechId;
			categories.value = getCategoriesByTechId(currentTechId);
			knowledgeCards.value = getKnowledgeCardsByTechId(currentTechId);
		}
		
		if (currentBgGradient !== bgGradient.value) {
			bgGradient.value = currentBgGradient;
		}
	});
</script>

<style lang="scss">
	/**
	 * Java知识点学习容器 - 渐变背景，固定高度不滚动
	 */
	.java-learn-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: background 0.5s ease;
	}

	/**
	 * 页面标题区域（包含返回按钮和标题）
	 */
	.page-header {
		flex-shrink: 0;
		padding: 20rpx 40rpx 40rpx;
		color: white;
		text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
		position: relative;
		z-index: 10;
	}

	.header-row {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.back-button {
		width: 72rpx;
		height: 72rpx;
		background: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		transition: all 0.3s ease;
		flex-shrink: 0;

		&:active {
			transform: scale(0.92);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
		}
	}

	.back-icon {
		font-size: 44rpx;
		color: #2c3e50;
		font-weight: 700;
	}

	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.header-title {
		font-size: 40rpx;
		font-weight: 800;
		letter-spacing: 1rpx;
		line-height: 1.3;
		animation: fadeInDown 0.6s ease-out;
	}

	.header-subtitle {
		font-size: 24rpx;
		opacity: 0.9;
		font-weight: 500;
		line-height: 1.4;
		animation: fadeInUp 0.6s ease-out;
	}

	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-40rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}
		to {
			opacity: 0.95;
			transform: translateY(0);
		}
	}

	/**
	 * 内容包装器 - 占据剩余空间
	 */
	.content-wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		overflow: hidden;
	}

	/**
	 * 分类选择器包装器
	 */
	.category-selector-wrapper {
		flex-shrink: 0;
		margin-bottom: 20rpx;
		padding: 32rpx 24rpx 28rpx;
		background: white;
		border-radius: 32rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
	}

	.category-selector-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.category-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #2c3e50;
	}

	.card-count {
		font-size: 24rpx;
		color: white;
		padding: 8rpx 16rpx;
		background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		border-radius: 100rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 12rpx rgba(52, 152, 219, 0.3);
	}

	/**
	 * 分类选择器 - 横向滚动
	 */
	.category-selector {
		display: flex;
		gap: 16rpx;
		white-space: nowrap;
	}

	/**
	 * 分类项
	 */
	.category-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		padding: 24rpx 28rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		color: #495057;
		border: 3rpx solid #dee2e6;
		border-radius: 24rpx;
		margin-right: 10px;
		font-size: 24rpx;
		font-weight: 600;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		flex-shrink: 0;
		min-height: 120rpx;
		justify-content: center;

		&:active {
			transform: translateY(-4rpx) scale(0.97);
		}
	}

	.category-icon {
		font-size: 40rpx;
		transition: transform 0.4s ease;
	}

	.category-text {
		font-size: 24rpx;
		font-weight: 600;
		white-space: nowrap;
	}

	.category-item.active {
		color: white;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-color: #667eea;
		box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.4);
		transform: translateY(-4rpx);

		.category-icon {
			transform: scale(1.15) rotate(5deg);
		}
	}

	/**
	 * 内容Swiper容器
	 */
	.content-swiper {
		flex: 1;
		width: 100%;
		height: 100%;
	}

	.swiper-page {
		width: 100%;
		height: 100%;
	}

	/**
	 * 卡片容器 - 可滚动区域
	 */
	.card-container {
		width: 100%;
		height: 100%;
	}

	/**
	 * 网格布局容器
	 */
	.cards-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 20rpx;
	}

	/**
	 * 空状态样式
	 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		gap: 24rpx;
		background: white;
		border-radius: 32rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
		min-height: 400rpx;
	}

	.empty-icon {
		font-size: 120rpx;
		opacity: 0.6;
		animation: emptyFloat 3s ease-in-out infinite;
	}

	.empty-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #2c3e50;
	}

	.empty-desc {
		font-size: 28rpx;
		color: #6c757d;
		text-align: center;
		line-height: 1.6;
	}

	@keyframes emptyFloat {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-16rpx);
		}
	}

	/**
	 * 网格卡片样式
	 */
	.grid-card {
		position: relative;
		background: white;
		border-radius: 24rpx;
		padding: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		min-height: 280rpx;
	}

	.grid-card-hover {
		transform: translateY(-8rpx);
		box-shadow: 0 16rpx 40rpx rgba(102, 126, 234, 0.3);
	}

	/**
	 * 卡片装饰条
	 */
	.grid-card-decoration {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 6rpx;
	}

	/**
	 * 卡片编号
	 */
	.grid-card-number {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		width: 48rpx;
		height: 48rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.number-text {
		font-size: 22rpx;
		font-weight: 800;
		color: white;
	}

	/**
	 * 卡片内容
	 */
	.grid-card-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		padding-top: 8rpx;
	}

	.grid-card-title {
		font-size: 32rpx;
		font-weight: 800;
		color: #2c3e50;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding-right: 56rpx;
	}

	.grid-card-desc {
		font-size: 24rpx;
		color: #6c757d;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		flex: 1;
	}

	/**
	 * 卡片底部信息
	 */
	.grid-card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12rpx;
		margin-top: 12rpx;
	}

	.grid-card-badge {
		padding: 8rpx 16rpx;
		border-radius: 100rpx;
		flex-shrink: 0;
	}

	.badge-text {
		font-size: 20rpx;
		font-weight: 700;
		color: white;
	}

	.grid-card-points {
		display: flex;
		align-items: center;
		gap: 6rpx;
		flex: 1;
	}

	.points-icon {
		font-size: 22rpx;
	}

	.points-text {
		font-size: 22rpx;
		color: #667eea;
		font-weight: 600;
	}

	/**
	 * 学习状态标识
	 */
	.learn-status {
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		width: 40rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3rpx solid #e9ecef;
		transition: all 0.3s ease;
	}

	.learn-status.learned {
		background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
		border-color: #27ae60;
	}

	.status-icon {
		font-size: 20rpx;
		color: #95a5a6;
	}

	.learn-status.learned .status-icon {
		font-size: 24rpx;
		color: white;
		font-weight: 700;
	}
</style>

